<template>
  <div class="userpage">
    <div class="usercontent">
      <!-- 表头 -->
      <div class="tabletitle">
        <div class="tabletitle-left">
          <el-avatar size="medium" :src="titleImg"></el-avatar>
          <div class="tabletitle-title">用户管理</div>
          <div class="tabletitle-search">
            <el-form size="small" :inline="true" :model="formInline">
              <el-form-item label="">
                <el-input
                  v-model="formInline.loginName"
                  placeholder="用户名"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="tabletitle-right">
          <el-button type="primary" size="small" @click="addClick"
            >新建</el-button
          >
        </div>
      </div>
      <!-- Table -->
      <div class="user-table">
        <el-table
          :data="tableData"
          v-loading="loading"
          element-loading-text="拼命加载中..."
          element-loading-background="#0a1568"
          style="width: 100%"
        >
          <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            prop="loginName"
            label="用户名"
          />
          <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            prop="id"
            label="用户ID"
          />
          <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            prop="password"
            label="密码"
          />
          <!-- <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            prop="status"
            label="状态"
          />
          <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            prop="createDate"
            label="创建日期"
          /> -->
          <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            prop="roleName"
            label="角色"
          />
          <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            fixed="right"
            prop="midLongTermPrice"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="editClick(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm
                :title="`确定删除 ${scope.row.loginName} 吗？`"
                @confirm="deleteClick(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  style="color: red"
                  size="small"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增和编辑 -->
    <el-dialog
      title="用户管理"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      custom-class="userdialog"
      width="500px"
    >
      <template slot="title">
        <div class="userdialog-title">
          <el-avatar size="small" :src="titleImg"></el-avatar>
          <div class="titleu">用户管理-{{ rowData.id ? "编辑" : "新增" }}</div>
        </div>
      </template>
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
        >
          <el-form-item class="fitem" label="用户名" prop="loginName">
            <el-input v-model="ruleForm.loginName" clearable></el-input>
          </el-form-item>
          <el-form-item class="fitem" label="密码" prop="password">
            <el-input v-model="ruleForm.password" clearable></el-input>
          </el-form-item>
          <el-form-item class="fitem" label="角色" prop="roleName">
            <el-checkbox-group v-model="ruleForm.roleName">
              <el-checkbox label="交易人员" name="交易人员"></el-checkbox>
              <el-checkbox label="非交易人员" name="非交易人员"></el-checkbox>
              <el-checkbox label="管理员" name="管理员"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogVisible = false;
            rowData = {};
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="onOk" :loading="dialogLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import titleImg from "@/assets/imgs/userTitle.png";
import { listApi, saveApi, updateApi, deleteApi } from "@/api/user";
const initruleForm = {
  loginName: "",
  password: "",
  roleName: [],
};
export default {
  data() {
    return {
      formInline: { loginName: null },
      titleImg,
      loading: false,
      tableData: [],
      dialogVisible: false,
      rules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: "请选择角色", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      ruleForm: { ...initruleForm },
      rowData: {},
      dialogLoading: false,
    };
  },
  created() {
    this.getList();
  },

  mounted() {},
  methods: {
    onSubmit() {
      console.log(this.formInline, "formInline");
      this.getList();
    },
    async getList() {
      this.loading = true;
      const res = await listApi(this.formInline);
      this.loading = false;
      this.tableData = res;
    },
    addClick() {
      this.rowData = {};
      this.ruleForm = { ...initruleForm };
      this.dialogVisible = true;
    },
    editClick(row) {
      this.rowData = row;
      console.log(row);
      this.ruleForm = {
        loginName: row.loginName,
        password: row.password,
        realName: row.realName,
        roleName: row.roleName.split(","),
      };
      this.dialogVisible = true;
    },
    async deleteClick(row) {
      const res = await deleteApi(row.id);
      console.log(res, "row删除");
      this.$message({
        message: `删除成功!`,
        type: "success",
      });
      this.getList();
    },
    onOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          console.log(this.ruleForm);
          this.dialogLoading = true;
          const params = {
            ...this.ruleForm,
            roleName: this.ruleForm.roleName.toString(),
            realName: this.ruleForm.loginName,
          };
          let res = {};
          if (this.rowData.id) {
            res = await updateApi({ id: this.rowData.id, ...params });
          } else {
            res = await saveApi(params);
          }
          this.dialogLoading = false;
          if (res.id) {
            this.$message({
              message: `${this.rowData.id ? "编辑" : "新增"}成功!`,
              type: "success",
            });
            this.getList();
            this.dialogVisible = false;
            this.rowData = {};
            this.ruleForm = { ...initruleForm };
          } else {
            this.$message({
              message: `${this.rowData.id ? "编辑" : "新增"}失败!`,
              type: "error",
            });
          }

          // console.log(res,'res-----');
          // if (res.loginFlag) {
          //     router.push('/home')
          // }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.userpage {
  height: 100%;
  padding: 24px;
  .usercontent {
    // margin: 24px;
    // margin-bottom: 100px;
    background: rgba(2, 0, 77, 0.4);
    box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
    border: 2px solid #0d53b7;
    // height: 100%;
    height: calc(100% - 48px);
    border-radius: 4px;
    padding-top: 12px;
    // box-sizing: border-box;
    .tabletitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 24px;
      $rightWidth: 200px;
      height: 36px;
      line-height: 36px;
      overflow: hidden;
      .tabletitle-left {
        display: flex;
        align-items: center;
        // width: fit-content;
        width: calc(100% - $rightWidth);
        .tabletitle-title {
          font-weight: 400;
          font-size: 22px;
          color: #ffffff;
          margin: 0 8px;
          // line-height: 33px;
        }
        .tabletitle-search {
          margin-top: 20px;
        }
      }
      .tabletitle-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: $rightWidth;
      }
    }

    .user-table {
      padding: 24px;
      :deep(.columnUser) {
        background: #0a1568;
        padding-left: 2px;
        padding-right: 2px;
        border-color: rgba(102, 255, 255, 0.2);
        color: #ffffff;
      }
      :deep(.el-table::before) {
        background-color: #0a1568;
      }
      :deep(.el-table__fixed-right::before) {
        background-color: #0a1568;
      }
      :deep(.el-table__empty-block) {
        background-color: #0a1568;
      }
      // .columnUser{
      //     background: #0a1568 !important;
      // }
    }
  }
  .userdialog {
    :deep(.el-dialog__header) {
      background-color: #020060;
    }

    .userdialog-title {
      display: flex;
      align-items: center;
      .titleu {
        font-weight: 400;
        //   font-size: 22px;
        //   color: #ffffff;
        color: black;
        margin: 0 8px;
        // line-height: 33px;
      }
    }
    // .fitem {
    //     // padding-left: 56px;
    //     margin-bottom: 40px;
    //     .el-form-item__label {
    //             font-weight: 400;
    //             font-size: 16px;
    //             color: #FFFFFF;
    //     }
    //      > .el-form-item__label:before{
    //         content: '';
    //     }
    //     .el-form-item__content{
    //         // background: rgba(102,255,255,0.2);

    //         // opacity: 0.3;
    //         width: 360px;
    //         .el-input{
    //             :deep(input){
    //             background: rgba(102,255,255,0.1);
    //                 border: 1px solid rgba(102, 255, 255, 0.3);
    //                 // opacity: 0.3;
    //                 font-weight: 400;
    //             font-size: 16px;
    //             color: #FFFFFF;
    //             }
    //         }
    //     }
    // }
  }
}
</style>
